iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
Modern Web

30天手把手的vue.js教學!系列 第 14

2020it邦鐵人賽-30天手把手的Vue.js教學 Day14 - 認識插槽slot基礎用法

  • 分享至 

  • xImage
  •  
tags: Vue.js ItIron2020

前言

前兩天我們已經介紹完vue中父子組件如何利用props & emit做溝通,到此為止你其實已經可以應付很多種情況了! 幹得好啊~! 今天我們插一個題外話,來介紹vue組件中很常使用到的插槽Slot! 內容相對前幾天會輕鬆很多,大家今天可以放鬆一下:D 那馬上就開始吧!

什麼是slot?

slot是vue組件中用來做內容分配的的API,就像一個插槽一樣,你可以根據情況在插槽內插入想要的內容,讓你的vue組件更加的泛用。 概念聽起來很抽象,我們一樣實際看個例子就可以很快了解了!

slot基本用法

還記得我們怎麼在vue中建立全域組件嗎? 現在我們隨便註冊一個新的組件叫做post! 程式碼就是像以下這樣。

<template>
  <div id="app">
    <post></post>
  </div>
</template>



Vue.component("post", {
  template: `
  <div>
    <div class="post-title">
       <h1>鐵人賽Day14紀錄</h1> 
    </div>
    <div class="post-body">
      <p>鐵人賽Day14!! 快一半了!</p>
    </div>
  </div>
  `,
});

毫不意外的,你會在頁面上看到以下的內容。
slot-demo

加入slot則是可以改寫為這樣,先看一下組件的部分

Vue.component("post", {
  template: `
  <div>
    <slot></slot>
  </div>
  `,
})

slot的部分表示要從父層插入的內容,往下看就會理解了

<template>
  <div id="app">
    <post>
        <div class="post-title">
           <h1>鐵人賽Day14紀錄</h1> 
        </div>
        <div class="post-body">
          <p>鐵人賽Day14!! 快一半了!</p>
        </div>
    </post>
  </div>
</template>

此時你在post組件標籤夾住的內容就會像把內容插入插槽一樣,最終渲染出一模一樣的結果。 今天你若是將內容改為

<post><h1>這就是slot的啦~!</h1></post>

最終渲染出來的程式碼結構就是

<div>
  <h1>這就是slot的啦~!</h1>
</div>

slot 備用內容(fallback content)

有時候也會碰到父層並沒有寫入任何內容,這時候你可以在原先的組件中加入預設的備用內容,當沒收到父層傳入的內容時,就會顯示預設內容。 我們稍微改寫一下上方post組件的內容。

Vue.component("post", {
  template: `
  <div>
    <slot>如果沒有內容,那我就印出這行字囉</slot>
  </div>
  `,
});

再次執行一樣的程式碼,你會發現沒有差別

<post><h1>這就是slot的啦~!</h1></post>

不過一旦沒有傳入任何內容,那我們就可以看到我們預期的輸出結果!

<post></post>

渲染出來的程式碼結構就是

<div>
  如果沒有內容,那我就印出這行字囉
</div>

命名插槽 (named slot)

在組件中你也可以寫入複數個slot,讓你父層在使用的同時更加彈性,在子層我們透過name屬性去將每個slot命名,父層時就可以針對該插槽去插入指定的內容,一樣我們看個簡單的範例吧! 再次修改我們的post組件
我們這次一次寫入三個插槽

Vue.component("post", {
  template: `
  <div>
    <slot name="title"></slot>
    <slot name="body"></slot>
    <slot></slot>
  </div>
  `,
})

上方的template則改為以下的寫法

<template>
  <div id="app">
    <post>
       <template #title>
         <h1>鐵人賽Day14紀錄</h1> 
       </template>
       <h3>我沒有被分配到插槽,我會直接插入slot預設位置</h3>
       <template #body>
         <p>鐵人賽Day14!! 快一半了!</p>
       </template>
    </post>
  </div>
</template>

這邊我們利用#title去尋找對應的插槽位置,它會對應到name為tilte的插槽
,特別注意一下上方的結構,其中h3並沒有指定任何插槽,這樣的情況就會直接對應到位置。 上方的程式碼會有以下的輸出結果

slot2

結語

今天我們簡單的介紹了一下插槽的概念,在應付結構複雜的組件時相當的方便,其中也有一些更為進階的用法,我們就留到之後再介紹,今天只要先了解這樣的概念即可,實際把玩過我認為印象會更為深刻,老樣子這裡提供今天的demo,沒問題的話我們大家就明天見囉~!

此文章同步發布於個人部落格,有興趣的大大也可以來參觀一下:D


上一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day13 - 認識emit客製事件,由內向外的資料傳遞
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day15 - 認識Single file components(SFC)
系列文
30天手把手的vue.js教學!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言